html,
body {
  padding: 0px;
  margin: 0px;
  border: 0px;
  width: 100%;
  height: 100%; }

html {
  overflow: hidden;
  background: #ad242b; }

.swiper-container,
.swiper-wrapper {
  width: 10rem;
  height: 100%;
  margin: 0px auto; }

.fl {
  float: left; }

.fr {
  float: right; }

.clearfloat:after {
  content: '';
  display: block;
  clear: both;
  height: 0px;
  visibility: hidden; }

.clearfloat {
  zoom: 1; }

.swiper-wrapper {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; }

.swiper-slide {
  width: 10rem;
  height: 100%;
  position: relative;
  background: url(../images/bg.jpg); }
  .swiper-slide .left_flower {
    width: 1.17333rem;
    height: 1.86667rem;
    margin-top: 0.4rem;
    position: relative;
    z-index: 12;
    background-image: url(../images/img01.png);
    background-repeat: no-repeat;
    background-size: 1.17333rem 1.86667rem; }
  .swiper-slide .right_flower {
    width: 2.70667rem;
    height: 2.14667rem;
    position: relative;
    z-index: 12;
    background-image: url(../images/img02.png);
    background-repeat: no-repeat;
    background-size: 2.70667rem 4.30667rem; }
  .swiper-slide .bottom_flower {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 10rem;
    height: 2.14667rem;
    z-index: 10;
    background-image: url(../images/img07.png);
    background-repeat: no-repeat;
    background-size: 10rem 2.14667rem; }
  .swiper-slide .logo {
    width: 5.09333rem;
    height: 3.30667rem;
    position: relative;
    margin: 0 auto;
    z-index: 1 !important;
    background-image: url(../images/img04.png);
    background-size: 5.09333rem 3.30667rem; }

.page1 .letter_box {
  width: 10rem;
  height: 11.86667rem;
  margin-top: 0.4rem;
  position: relative;
  overflow: hidden;
  z-index: 2; }

.page1 .letter01 {
  width: 9.17333rem;
  height: 4.34667rem;
  position: absolute;
  bottom: 0rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #690509; }

.page1 .pager {
  width: 7.89333rem;
  height: 10.66667rem;
  position: relative;
  margin: 0rem auto;
  top: 0rem;
  z-index: 8;
  border-radius: 0.4rem;
  overflow: hidden;
  padding: 0.26667rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: url(../images/page_bg.png) repeat; }
  .page1 .pager .line_box {
    width: 7.33333rem;
    height: 9.33333rem;
    padding-top: 1px;
    background-image: url(../images/box_line.png);
    background-size: 7.33333rem 9.33333rem;
    text-align: center; }
    .page1 .pager .line_box .img01 {
      width: 4.22667rem;
      height: 1.33333rem;
      background-image: url(../images/page01.png);
      margin: 0.8rem auto 0rem;
      background-size: 4.22667rem 1.33333rem; }
    .page1 .pager .line_box .img02 {
      width: 4.50667rem;
      height: 0.4rem;
      margin: 0.21333rem auto;
      background-image: url(../images/page02.png);
      background-size: 4.50667rem 0.4rem; }
    .page1 .pager .line_box h2 {
      margin: 0.26667rem;
      font-size: 0.64rem;
      color: #a51920; }
    .page1 .pager .line_box > p {
      width: 6.02667rem;
      margin: 0rem auto;
      font-size: 0.37333rem;
      color: #6a6767;
      line-height: 0.61333rem; }
    .page1 .pager .line_box .time {
      margin-top: 0.26667rem; }
      .page1 .pager .line_box .time p {
        font-size: 0.37333rem;
        color: #6a6767;
        line-height: 0.61333rem; }

.page1 .letter02 {
  width: 9.78667rem;
  height: 3.66667rem;
  position: absolute;
  z-index: 2;
  left: 0.06667rem;
  bottom: 4.34667rem;
  background-image: url(../images/letter_01.png);
  background-size: 9.78667rem 3.66667rem; }

.page1 .letter03 {
  width: 9.17333rem;
  height: 4.34667rem;
  background-image: url(../images/letter_03.png);
  background-size: 9.17333rem 4.34667rem;
  position: absolute;
  z-index: 9;
  bottom: 0px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%); }
  .page1 .letter03 .letter04 {
    width: 3.77333rem;
    height: 2.78667rem;
    position: relative;
    margin: 1.33333rem auto;
    z-index: 10;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background-image: url(../images/letter_02.png);
    background-size: 3.77333rem 2.78667rem; }
  .page1 .letter03 .lantern {
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 1.5rem;
    left: 1rem;
    background-image: url(../images/img03.png);
    background-size: 1rem 1rem; }

.page1 .pagoda_box {
  width: 750px;
  height: 7.06667rem;
  position: absolute;
  z-index: 1; }
  .page1 .pagoda_box .pagoda {
    width: 2.08rem;
    height: 5.41333rem;
    position: absolute;
    left: 0.53333rem;
    top: -2.1rem;
    z-index: 2;
    background-image: url(../images/img06.png);
    background-size: 2.08rem 5.41333rem; }
  .page1 .pagoda_box .slik {
    width: 10rem;
    height: 6.94667rem;
    position: absolute;
    top: -0.13333rem;
    left: 0px;
    z-index: 3;
    background-image: url(../images/img05.png);
    background-size: 10rem 6.94667rem; }

.radius {
  width: 1.06667rem;
  height: 1.06667rem;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 10000; }
  .radius audio {
    opacity: 0; }
